<html>

<head>
    <title>upload</title>
</head>
<body>

<div id="container" style="display: inline-block;width: 300px;height: 300px;background-color: aquamarine"></div>
<div id="fileList" style="display: inline-block;width: 300px;height: 300px;background-color: azure"></div>
<script>

    function addDNDListeners() {

        var container = document.getElementById("container");

        var fileList = document.getElementById("fileList");

        container.addEventListener("dragenter", function (event) {

            fileList.innerHTML = '';

            event.stopPropagation();

            event.preventDefault();

        }, false);

        container.addEventListener("dragover", function (event) {

            event.stopPropagation();

            event.preventDefault();

        }, false);

        container.addEventListener("drop", handleDrop, false);

    }

    function handleDrop(event) {

        var files = event.dataTransfer.files;
        event.stopPropagation();

        event.preventDefault();


        var fileList = document.getElementById("fileList");

        for (var i = 0; i < files.length; i++) {

            var file = files[i];

            var li = document.createElement('li');

            var progressbar = document.createElement('div');

            var img = document.createElement('img');

            var name = document.createElement('span');

            progressbar.className = "progressBar";

            name.innerHTML = file.name;

            li.appendChild(img);

            li.appendChild(name);

            li.appendChild(progressbar);

            fileList.appendChild(li);

            // uploadFile(file, progressbar)
            upload(file, progressbar);
        }

    }

    function uploadFile(file, progressbar) {

        var xhr = new XMLHttpRequest();

        var upload = xhr.upload;


        var p = document.createElement('p');

        p.textContent = "0%";


        progressbar.appendChild(p);

        upload.progressbar = progressbar;

        upload.addEventListener("progress", uploadProgress, false);

        upload.addEventListener("load", uploadSucceed, false);

        upload.addEventListener("error", uploadError, false);

        xhr.open("POST", "upload.jsp?fileName=" + file.name);

        xhr.overrideMimeType("application/octet-stream");

        xhr.sendAsBinary(file.getAsBinary());

    }

    function uploadProgress(event) {

        if (event.lengthComputable) {

            var percentage = ((event.loaded * 100) / event.total).toFixed(2);

            console.log("percentage:" + percentage);

            if (percentage < 100) {

                event.target.progressbar.firstChild.style.width = (percentage * 2) + "px";
                event.target.progressbar.firstChild.style.backgroundColor = "#909090";
                event.target.progressbar.firstChild.textContent = percentage + "%";

            }

        }

    }

    function uploadSucceed(event) {

        event.target.progressbar.firstChild.style.width = "200px";

        event.target.progressbar.firstChild.textContent = "100%";

    }

    function uploadError(error) {

        alert("error: " + error);

    }

    window.addEventListener("load", addDNDListeners, false);
</script>

<script>
    var upload = function (files, progressbar) {

        if (files.length == 0) return;

        var form = new FormData(),
            url = 'http://localhost:81/upload', //服务器上传地址
            file = files;

        form.append('file', file);
        form.append('fil2', file);

        var xhr = new XMLHttpRequest();

        xhr.open("post", url, true);
        // xhr.overrideMimeType("multipart/form-data;");

        //上传进度事件

        var upload = xhr.upload;

        var p = document.createElement('p');
        p.textContent = "0%";

        progressbar.appendChild(p);

        upload.progressbar = progressbar;

        upload.addEventListener("progress", uploadProgress, false);

        upload.addEventListener("load", uploadSucceed, false);

        upload.addEventListener("error", uploadError, false);

        xhr.send(form); //开始上传
    }

</script>
</body>
</html>
</body>
</html>